class Page
{
    constructor (el,option = {})
    {
        this.el = document.querySelector(el)
        this.options = option
        this.init()
    }
    
    init()
    {
        this.createTag()
        this.parentEl()
        this.bdOnclick()
    }

    createTag() 
    {
        this.el.innerHTML = ''
        for (let key in this.options.pageTag) {  
            let pageTag = this.options.pageTag[key]
            this.createPObjs('p',pageTag,this.el)
        }
        this.createNum()
    }

    parentEl()
    {
        this.el.style.display = 'flex'
        this.el.style.justifyContent = 'center'
        this.el.style.alignItems = 'center'
    }

    createNum()
    {
        let tag3Obj = this.el.querySelector('p:nth-child(3)')
        tag3Obj.style.border = 'none'
        tag3Obj.style.margin = '0'
        tag3Obj.style.padding = '0'
        // for (let i = 1;i < 6;i++) {
        //     this.createPObjs('p',i,tag3Obj)
        // }
        // 1 2 3 4 5 ... 99 100  	     pageNum < 5
        // 1 2 3 4 5 6 7 ... 99 100      pageNum == 5
        // 1 2 ... 4 5 6 7 8 .. 99 100   pageNum > 5 && pageNum < 总页数-4
        // 1 2 ... 96 97 98 99 100       pageNum >= 总页数-4
        let pageNum = this.options.pageInfo.pageNum
        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
        let totalPage = this.options.pageInfo.totalPage
        if (totalPage < 7) {
            for (let i = 1;i <= totalPage;i++) this.createPObjs('p',i,tag3Obj)
        }else if (pageNum < 5) {
            for (let i = 1;i <= 5;i++) this.createPObjs('p',i,tag3Obj);
            this.createPObjs('p','...',tag3Obj)
            this.createPObjs('p',totalPage - 1,tag3Obj)
            this.createPObjs('p',totalPage,tag3Obj)
        }else if (pageNum == 5) {
            for (let i = 1;i <= 7;i++) this.createPObjs('p',i,tag3Obj);
            this.createPObjs('p','...',tag3Obj)
            this.createPObjs('p',totalPage - 1,tag3Obj)
            this.createPObjs('p',totalPage,tag3Obj)
        }else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1;i <= 2;i++) this.createPObjs('p',i,tag3Obj);
            this.createPObjs('p','...',tag3Obj)
            this.createPObjs('p',pageNum - 2,tag3Obj)
            this.createPObjs('p',pageNum - 1,tag3Obj)
            this.createPObjs('p',pageNum,tag3Obj)
            this.createPObjs('p',pageNum + 1,tag3Obj)
            this.createPObjs('p',pageNum + 2,tag3Obj)
            this.createPObjs('p','...',tag3Obj)
            this.createPObjs('p',totalPage - 1,tag3Obj)
            this.createPObjs('p',totalPage,tag3Obj)
        }else if (pageNum >= totalPage - 4) {
            for (let i = 1;i <= 2;i++) this.createPObjs('p',i,tag3Obj);
            this.createPObjs('p','...',tag3Obj)
            for (let i = totalPage - 4;i <= totalPage;i++) this.createPObjs('p',i,tag3Obj)
        }
    }

    createPObjs(element,innerText,father)
    {
            let pObjs = document.createElement(element)
            pObjs.innerText = innerText
            pObjs.style.border = '1px black solid'
            pObjs.style.margin = '0 5px'
            pObjs.style.padding = '0 5px'
            pObjs.style.display = 'inline-block'
            pObjs.style.cursor = 'pointer'
            if (innerText == this.options.pageInfo.pageNum) pObjs.style.background = 'orange'
            father.appendChild(pObjs)
    }

    bdOnclick()
    {
        this.el.onclick = (evt) => {
            let e = evt || window.event
            let target = evt.target || evt.srcElement
            if (target.nodeName === 'P') {
                switch(target.innerText) {
                    case this.options.pageTag.first:
                        this.options.pageInfo.pageNum = 1
                        break;
                    case this.options.pageTag.prev:
                        if (this.options.pageInfo.pageNum == 1) return
                        this.options.pageInfo.pageNum--
                        break;
                    case this.options.pageTag.next:
                        if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                        this.options.pageInfo.pageNum++
                        break;
                    case this.options.pageTag.last:
                        this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                        break;
                    default:
                        if (parseInt(target.innerHTML) > 0) {
                            this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                        }
                        break;
                }
                this.createTag()
            }
        }
    }
}